<template>
  <div>
    <a-spin :spinning="loading" size="large">
      <a-card class="cardArea">
        <!-- 标题 -->
        <div slot="title" class="cardArea_title">
          <div class="cardArea_title_prefix"></div>
          <div class="cardArea_title_center">工作日历</div>
        </div>
        <!-- 日历 -->
        <a-calendar class="cardArea_calendar" v-if="!loading" :validRange="validRange" valueFormat="YYYY-MM-DD">
          <template slot="dateFullCellRender" slot-scope="value">
            <div
              :class="
                getIswork(value)
                  ? 'cardArea_calendar_item calendar_item_iswork'
                  : 'cardArea_calendar_item calendar_item_nowork'
              "
              @click="changeIswork(getDayData(value))"
            >
              <div class="cardArea_calendar_item_day">{{ getDayData(value).day }}</div>
              <div class="cardArea_calendar_item_lunar">{{ getDayData(value).lunarCopy }}</div>
              <div v-if="getIswork(value)" class="cardArea_calendar_item_iswork_bg">班</div>
              <div v-else class="cardArea_calendar_item_nowork_bg">休</div>
            </div>
          </template>
        </a-calendar>
      </a-card>
    </a-spin>
  </div>
</template>

<script>
import { queryHa_calendarList, saveHa_calendar } from '@/api/base/ha_calendar.js'
import moment from 'moment'

export default {
  data () {
    return {
      loading: true, // 加载状态
      pageinfo: {
        // 查询日历列表所传参数
        pageSize: 2147483647
      },
      lunarMap: {}, // 日期储存对象
      validRange: [] // 可显示的日历天数
    }
  },
  async created () {
    await this.getCalendarList()
  },
  methods: {
    // 时间格式化
    getNowDate (value) {
      let date = new Date(value),
        year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate()
      month >= 1 && month <= 9 ? (month = '0' + month) : ''
      day >= 0 && day <= 9 ? (day = '0' + day) : ''
      return String(year) + String(month) + String(day)
    },
    // 获取某月的所有日期
    async getCalendarList () {
      let res = await queryHa_calendarList(this.pageinfo)
      if (res.code == 0) {
        if (res.data.records && res.data.records.length > 0) {
          res.data.records.forEach(v => {
            let lunarCopy = null
            if (v.lunar.indexOf('初一') != -1) {
              lunarCopy = v.lunar.substring(0, 2)
            } else {
              lunarCopy = v.lunar.substring(v.lunar.length - 3, v.lunar.length - 1)
            }
            let day = v.gregorian.substring(8, 10)
            this.lunarMap[v.id] = {
              id: v.id,
              lunarCopy: lunarCopy,
              iswork: v.iswork,
              lunar: v.lunar,
              day: day,
              gregorian: v.gregorian,
              zodiac: v.zodiac
            }
          })
        }
      }
      let beginTime = moment(res.data.records[res.data.records.length - 1].gregorian)
      let endTime = moment(res.data.records[0].gregorian)
      this.validRange = []
      this.validRange.push(beginTime)
      this.validRange.push(endTime)
      this.loading = false
    },
    // 日期单元格中插入农历
    getDayData (value) {
      let id = this.getNowDate(value._d)
      if (this.lunarMap.hasOwnProperty(Number(id))) {
        return this.lunarMap[Number(id)]
      } else {
        return {
          iswork: '',
          lunar: '',
          day: ''
        }
      }
    },
    getIswork (value) {
      let dayItem = this.getDayData(value)
      if (dayItem != null && dayItem != undefined && dayItem.hasOwnProperty('iswork')) {
        if (dayItem.iswork == 3200) {
          return true
        } else {
          return false
        }
      }
      return true
    },
    // 工作日，休息日切换
    async changeIswork (value) {
      value.iswork == 3200
        ? (value.iswork = this.lunarMap[value.id].iswork = 3201)
        : (value.iswork = this.lunarMap[value.id].iswork = 3200)
      let res = await saveHa_calendar(value)
    }
  }
}
</script>

<style lang="less" scoped>
.cardArea {
  position: relative;
}

.cardArea_title {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.cardArea_title_prefix {
  width: 3px;
  height: 17px;
  background-color: #5b79fb;
}

.cardArea_title_center {
  margin-left: 0.5%;
  font-size: 1.2rem;
  font-family: Source Han Sans CN;
  font-weight: 550;
  color: #232323;
  letter-spacing: 2px;
}

.cardArea_calendar_item {
  width: 100%;
  max-width: 100%;
  height: 120px;
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  font-feature-settings: 'tnum';
  border-top: 1px solid #d9d9d9;
  border-top-width: 10%;
  outline: none;
}

.calendar_item_iswork {
  background-color: #eefaff;
}

.calendar_item_nowork {
  background-color: #fff4f4;
}

.cardArea_calendar_item_day {
  font-size: 32px;
  position: absolute;
  top: 10%;
  right: 43%;
  color: #46474a;
}

.cardArea_calendar_item_lunar {
  position: absolute;
  top: 60%;
  right: 44%;
  color: #909399;
}

.cardArea_calendar_item_iswork_bg {
  position: absolute;
  bottom: 0%;
  right: 10%;
  font-size: 40px;
  opacity: 0.3;
  color: #96f7c8;
}

.cardArea_calendar_item_nowork_bg {
  position: absolute;
  bottom: 0%;
  right: 10%;
  font-size: 40px;
  opacity: 0.3;
  color: #96f7c8;
}

/deep/ .ant-fullcalendar-next-month-btn-day {
  .cardArea_calendar_item {
    background-color: #ffffff !important;
  }
  .cardArea_calendar_item_iswork_bg {
    display: none !important;
  }
  .cardArea_calendar_item_nowork_bg {
    display: none !important;
  }
  .cardArea_calendar_item_day {
    color: #00000040 !important;
  }
  .cardArea_calendar_item_lunar {
    color: #00000040 !important;
  }
}

/deep/ .ant-fullcalendar-last-month-cell {
  .cardArea_calendar_item {
    background-color: #ffffff !important;
  }
  .cardArea_calendar_item_iswork_bg {
    display: none !important;
  }
  .cardArea_calendar_item_nowork_bg {
    display: none !important;
  }
  .cardArea_calendar_item_day {
    color: #00000040 !important;
  }
  .cardArea_calendar_item_lunar {
    color: #00000040 !important;
  }
}
</style>
